OneUI Docs by pixelcave

Thank you for choosing OneUI!

We are very excited to release OneUI 5 version as a free update to all of you who supported the project all these years and keep supporting it with new purchases. It's our way of thanking you for choosing one of our templates for your projects. We hope you like it and put it into good use by building new awesome projects. Wish you all the best and happy coding! 🙏😊

Changelog

February 10, 2022

New Features

Laravel 9 Starter Kit
Font Awesome 6 (105 new icons)
Checkout Page
Installation Page
Responsive DataTables
Email validation with dot rule

Improvements

Replaced sass with sass-embedded for faster compilation times
Improved header overlay visibility

Fixes

template.js forEach is not a function error

Updates

Bootstrap 5.1.3 (5.1.1)
@popperjs/core 2.11.2 (2.10.1)
Font Awesome 6.0.0 (5.15.4) - 105 New Icons
FullCalendar 5.10.1 (5.9.0)
@ckeditor/* 32.0.0 (29.2.0)
CKEditor4 4.17.1 (4.16.2)
Chart.js 3.7.0 (3.5.1)
DataTables 1.11.4 (1.11.2)
DataTables Buttons 2.2.2 (2.0.0)
Dropzone 5.9.3 (5.9.2)
Pdfmake 0.2.4 (0.2.2)
Raty JS 3.1.1 (3.0.0)
SweetAlert2 11.4.0 (11.1.5)
SimpleBar 5.3.6 (5.3.5)
Laravel Starter Kit: Laravel 9.0 (8.60.0)

September 14, 2021

New Features

Mega menu
Vertical tabs
Block form controls
DataTables official BS5 Integration + excel/pdf button examples
remember-theme class in #page-container now also remembers dark mode preference

Improvements

Various style improvements
Color theme support for custom form controls
Better dark theme support for custom form controls and other components
Form switch design
Full Calendar theming
Font Awesome Pro Icons support in DataTables

Fixes

'jq-notify' helper fixed when using it through custom JS
Small visual glitches in landing page examples
Main navigation submenu click (now correctly prevents default behavior on click)

Updates

Bootstrap 5.1.1 (5.0.1)
@popperjs/core 2.10.1 (2.9.2)
Font Awesome 5.15.4 (5.15.3) - 8 new icons
FullCalendar 5.9.0 (5.7.2)
CropperJS 1.5.12 (1.5.11)
@ckeditor/* 29.2.0 (28.0.0)
CKEditor 4.16.2 (4.16.1)
DataTables 1.11.2 (1.10.25)
DataTables Buttons 2.0.0 (1.7.1)
SweetAlert2 11.1.5 (11.0.16)
SimpleBar 5.3.5 (5.3.3)
Laravel Starter Kit: Laravel 8.60.0 (8.46.0)

Changes

'es6-promise' plugin was removed and no longer used with SweetAlert2
Chart.js JS asset path was updated and its name is now in lowercase
DataTables CSS/JS asset paths are updated/changed
SCSS: Removed $headings-color from color-theme-dark() mixin

5.0 Release

June 10, 2021

Updating

OneUI will receive free updates in the future. One of the main goals was to make sure the update progress is going to be as easy as possible. Due to its nature (template), updating can become an unpleasant task.

Therefore we’ve tried to make it as easy as possible to let you apply your own overrides (in case you would like to) to both Sass (_scss/) or JavaScript (_js/) files without altering the original files. Please check Sass and JavaScript section for more info!

In general, the following core folders/files will have to be updated with each update:

HTML/PHP Versions

assets/css/
- themes/*
- oneui.css
- oneui.min.css
assets/js/
- lib/*
- plugins/*
- oneui.app.min.js
assets/fonts/*

Laravel Starter Kit (run the commands `npm install` and `npm run dev` after updating with the new files)

public/js/
- lib/*
- plugins/*
public/fonts/*
resources/
- js/oneui/modules/*
- sass/*
  Except custom/ folder where you can make your own modifications
webpack.mix.js
Please make sure you don’t override any custom additions you might have introduced
package.json
Please make sure you don’t override any custom packages you might have installed
package-lock.json

If you are working with source files (Sass and/or ES6), you will have to update the following as well:

HTML/PHP Versions

assets/_js/main/modules/*
assets/_scss/*
Except custom/ folder where you can make your own modifications

Moreover, if you are using Gulp tasks, remember to update the following files in your project’s root folder and then run the command npm install from your console to install/update any new dependencies:

HTML/PHP Versions

.babelrc
gulpfile.babel.js
package.json
package-lock.json

Remember that it’s always a good idea to backup your work before updating to a new version!

When a new update becomes available, you will be able to download it from Themeforest. You can check the checkbox under the product ( Get notified by email if this item is updated), follow us on Twitter or subscribe to our news to stay up to date about the availability of new updates.

Package

OneUI was built with extra care based on the valuable feedback we keep receiving over the past years working full-time on dashboard templates. It follows the best practices using the latest technologies and we really hope that you will enjoy working with it. OneUI will enable you to build fast, beautiful, user friendly web applications and websites that will work seamlessly across various screens and devices.

Let's have a look at the contents of the current package:

01 - OneUI Source (HTML)
Includes the abstract HTML version. This version can be used with any server side language/framework you prefer or currently working with.
02 - OneUI Source (PHP)
Includes the abstract PHP version. This version can come really handy as a starting point if you would like to build a custom PHP application. It can help you in many ways:
- It enables you to change various options of the layout just by updating the main variables found in src/inc/_global/config.php. The backend section has also its own folder with its own config file which can be used to overwrite the main variables of your choice for the pages in that section. For example, the extra config file for all backend pages (be_*.php) can be found in src/inc/backend/config.php.
- It uses basic templating for separating common used code (header, sidebar, footer etc). The main views which are used in every page can be found in src/inc/_global/views/*. The backend section has its own folder with its own views which can be used for common code, used only in the pages in that section. For example, the extra views for all backend pages (be_*.php) can be found in src/inc/backend/views/*.
- It features a recursive function that can build main navigation on the fly (with as many levels as you like) from a multidimensional array you can set in the config file of each section.
- It features various functions that can populate your pages with dummy content for testing and showcasing purposes src/inc/_classes/Template.php
- In general, this version can also give you a good idea of how you could implement your own templating in the language/framework of your choice.
03 - OneUI Source (Laravel Starter Kit)
If you are using Laravel to build your next project, then this starter kit is the perfect fit. It features a clean Laravel installation with all OneUI assets ready to work with Laravel Mix and a few example pages to get you started. You can either take the parts you want and integrate them into your current project or you can run the following commands to install all dependencies and start building with Laravel like you would normally do.
- composer install && npm install && php artisan key:generate
Afterwards, you can use the following Laravel commands you already now and love:
- php artisan serve
  Serves your project
- npm run watch
  Watches your files and compiles your assets on the fly (also auto reloads your browser)
- npm run dev
  Compiles your assets
- npm run prod
  Compiles and prepares your assets for production
Please have in mind that you have to already be familiar with Laravel to use this version. If you are interested in learning Laravel, you can have a look at the official documentation. If you would like to use OneUI in your existing Laravel installation or replicate any page from the full HTML version, please have a look at the Laravel Starter Kit section for more info.
Documentation
Of course, it includes current documentation!

You don’t have to use Node.js or Gulp with the template if you don't like. You can ignore .babelrc, gulpfile.babel.js, package.json and package-lock.json and work directly with the files found in the src/ folder of each version. In that case, you won't be able to take advantage of our premade tasks and if for example you would like to work with and compile the Sass/ES6 files, you will just have to use your own compiling method or tasks. Alternatively, you can just use the minimized production ready files (which are used by default in all pages) and work as usual.

Bootstrap

Bootstrap is the world's most popular front-end component library. It is easy to use and offers a large variety of CSS as well as JavaScript components. OneUI uses this framework at its core and builds on top its unique layout and features. It redesigns/extends the original components and introduces new ones, featuring a modern and clean design.

If you are unfamiliar with the framework, its official website will help you out a lot but if you just want to start quickly, you can easily replicate any feature or component we already present in OneUI pages. If you find a feature in the official Bootstrap Docs you would like to use, feel free to, since they are all available in OneUI.

Gulp Tasks

Gulp is a JavaScript Task Runner. It enables you to automate repetitive tasks like minification, compilation, unit testing, linting, etc, which makes your life easier.

In OneUI, we've created many Gulp tasks which take care of everything for you! They set up a web server which auto refreshes on file changes, compile on the fly your Sass and ES6 files into CSS and ES5 respectively and build your production ready project.

To use it with the template (HTML or PHP version), you will first have to:

Download and install Node.js
Prefer the LTS version just to make sure there won't be any incompatibilities
Install gulp-cli globally by running the command npm install -g gulp-cli in your system’s console.
(Optional step for running the PHP web server for the PHP version) Make sure that you've installed PHP on your system and that PHP is included in your system's PATH. You can try running php --version in your console to see if it is already installed.
Install all required dependencies in your project’s folder by running the command npm install in your system’s console - You will have to run it from your project’s root folder which will have to include src/ folder, .babelrc, gulpfile.babel.js, package.json and package-lock.json files.

After you’ve successfully completed the previous steps, you will be able to run the following commands in your system’s console from your project’s root folder and start working:

Command Description

Main Tasks

gulp run-html

Sets up a custom static HTML Web server at http://localhost:3000 which auto refreshes when you update any vital file in the project. It also starts watching for changes in the Sass and ES6 files and auto recompiles them to CSS and ES5 respectively if there is a change.

gulp run-php

Sets up a custom PHP Web server at http://localhost:3000 which auto refreshes when you update any vital file in the project. It also starts watching for changes in the Sass and ES6 files and auto recompiles them to CSS and ES5 respectively if there is a change.

gulp build

It will prepare and build your custom, minimized and production ready OneUI project. After it completes, you will be able to find it under a new dist/ folder in your project’s root folder.

Additional Tasks (on demand)

gulp css

Compiles from Sass to CSS (Autoprefixer auto adds required browser CSS prefixes).

Entry	Output
`assets/_scss/main.scss`	`assets/css/oneui.css` `assets/css/oneui.min.css`
`assets/_scss/oneui/themes/*`	`assets/css/themes/.css` `assets/css/themes/.min.css`

gulp js

Webpack bundles JS modules together and Babel compiles from ES6 to ES5:

Entry	Output
`assets/_js/main/app.js`	`assets/js/oneui.app.min.js`
`assets/_js/pages/*`	`assets/js/pages/*.min.js`

gulp js-dev

Webpack bundles JS modules together and Babel compiles from ES6 to ES5:

Entry	Output
`assets/_js/main/app.js`	`assets/js/oneui.app.min.js`
`assets/_js/pages/*`	`assets/js/pages/*.min.js`

Webpack runs with development mode and produces development friendly files as well:

Entry	Output
`assets/_js/main/app.js`	`assets/js/oneui.app.js`
`assets/_js/pages/*`	`assets/js/pages/*.js`

gulp watch

It starts watching for changes in Sass and ES6 files and auto recompiles them to CSS and ES5 respectively if there is a change. Useful if you would like to run it separately since it automatically runs when you use the run-html and run-php tasks.

HTML

OneUI features a super flexible, smart and powerful layout which can be used to create dashboard and website pages with minimum effort using the same resources.

The layout offers many options which can be enabled just by adding or removing a class in the #page-container element. If you play around with the PHP version, you will be able to set these options from the src/inc/_global/config.php file.

Let’s have a quick look at the generic HTML structure and get familiar with the layout:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <!-- Title and Meta -->
    ...
    <!-- END Title and Meta -->

    <!-- Icons -->
    <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
    ...
    <!-- END Icons -->

    <!-- Stylesheets -->
    <!-- Page JS Plugins CSS go here -->

    <!-- Fonts and OneUI framework -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" id="css-main" href="assets/css/oneui.min.css">

    <!-- You can include a specific file from css/themes/ folder to alter the default color theme of the template. eg: -->
    <!-- <link rel="stylesheet" id="css-theme" href="assets/css/themes/amethyst.min.css"> -->
    <!-- END Stylesheets -->
  </head>
  <body>
    <!-- Page Container -->
    <!--
      Available classes for #page-container:

    GENERIC

      'remember-theme'                            Remembers active color theme and dark mode between pages using localStorage when set through
                                                  - Theme helper buttons [data-toggle="theme"],
                                                  - Layout helper buttons [data-toggle="layout" data-action="dark_mode_[on/off/toggle]"]
                                                  - ..and/or One.layout('dark_mode_[on/off/toggle]')

    SIDEBAR & SIDE OVERLAY

      'sidebar-r'                                 Right Sidebar and left Side Overlay (default is left Sidebar and right Side Overlay)
      'sidebar-mini'                              Mini hoverable Sidebar (screen width > 991px)
      'sidebar-o'                                 Visible Sidebar by default (screen width > 991px)
      'sidebar-o-xs'                              Visible Sidebar by default (screen width < 992px)
      'sidebar-dark'                              Dark themed sidebar

      'side-overlay-hover'                        Hoverable Side Overlay (screen width > 991px)
      'side-overlay-o'                            Visible Side Overlay by default

      'enable-page-overlay'                       Enables a visible clickable Page Overlay (closes Side Overlay on click) when Side Overlay opens

      'side-scroll'                               Enables custom scrolling on Sidebar and Side Overlay instead of native scrolling (screen width > 991px)

    HEADER

      ''                                          Static Header if no class is added
      'page-header-fixed'                         Fixed Header

    HEADER STYLE

      ''                                          Light themed Header
      'page-header-dark'                          Dark themed Header

    MAIN CONTENT LAYOUT

      ''                                          Full width Main Content if no class is added
      'main-content-boxed'                        Full width Main Content with a specific maximum width (screen width > 1200px)
      'main-content-narrow'                       Full width Main Content with a percentage width (screen width > 1200px)

    DARK MODE

      'sidebar-dark page-header-dark dark-mode'   Enable dark mode (light sidebar/header is not supported with dark mode)
    -->
    <div id="page-container">
      <!-- Page loader -->
      <!-- If #page-loader markup and also the "show" class is added, the loading screen will be enabled and auto hide once the page loads -->
      <!-- <div id="page-loader" class="show"></div> -->
      
      <!-- Side Overlay-->
      <aside id="side-overlay">
          ...
      </aside>
      <!-- END Side Overlay -->

      <!-- Sidebar -->
      <nav id="sidebar">
          ...
      </nav>
      <!-- END Sidebar -->

      <!-- Header -->
      <header id="page-header">
          ...
      </header>
      <!-- END Header -->

      <!-- Main Container -->
      <main id="main-container">
          ...
      </main>
      <!-- END Main Container -->

      <!-- Footer -->
      <footer id="page-footer">
          ...
      </footer>
      <!-- END Footer -->
    </div>
    <!-- END Page Container -->

    <!-- OneUI JS -->
    <script src="assets/js/oneui.app.min.js"></script>

    <!-- jQuery (Needed only if you would like to use a jQuery based plugin in your page) -->
    <script src="assets/js/lib/jquery.min.js"></script>

    <!-- Page JS Plugins + Page JS Code -->
  </body>
</html>

As you can see, we kept the HTML structure as simple as possible, so we hope that you find it easy to understand and implement in your own pages. Furthermore, have in mind that you can remove #side-overlay, #sidebar, #page-header or #page-footer markup if you would like to not have them in some of your pages. Everything will work as expected, just make sure that you don’t use any related classes (to the element you removed) in #page-container.

Sass

OneUI was built with Sass using the latest SCSS syntax. It is a powerful CSS pre-processor which extends the CSS language, adding features that allow variables, mixins, functions and many other techniques, enabling you to make CSS that is more maintainable and extendable.

If you would like to extend the framework and add your own styles or UI components, feel free to use the Sass files included in the source (HTML and PHP version) under src/assets/_scss/* folder. You can also use the included Gulp tasks to auto compile to CSS every time you make a change (any required browser prefixes will be auto added after compilation, so you don’t have to).

It is highly recommended though, to use the custom files we created for you to add your own styles and make the updating process easier. They can be found in assets/_scss/custom/. In assets/_scss/custom/_variables.scss you will be able to override any variables you want and in assets/_scss/custom/_main.scss you will be able to add your own styles or override current ones.

Let’s have a better look at the Sass files structure:

Files	Description
`bootstrap/*`	Includes all original unaltered Bootstrap 5 Sass files. The concept is to never touch those files, so that a framework update is possible.
`oneui/*`	Includes all OneUI Sass files which follow the structure Bootstrap 5 uses. All Bootstrap 5 overrides can also be found in here (variables/mixins/styles). We basically override what we can (using the available Bootstrap 5 variables) or want (mixins) to match our needs. Then we override the styles we can’t alter with variables and add our own components. This method allows us to easily update Bootstrap, resuse its features in our styles and also export a smaller main CSS file with fewer style overrides.
`vendor/*`	Includes all third party styles (eg animation.css, fontawesome icons, simple line icons). In here, you will also find all style overrides for the integrated plugins.
`custom/*`	This is your own folder in which you can add your own styles or overrides. Making your own changes in here will enable you to just update all other folders (when an update becomes available) without worrying of erasing your changes.
`main.scss`	This file is compiled to the main CSS stylesheet `oneui.css`. From here you could easily update the compiled CSS file by commenting out the components you won’t use in your project. This way, you can achieve the smallest possible footprint for your main CSS file by only including what you need.

JavaScript

OneUI custom JS functionality was built from scratch with ES6 (ECMAScript 2015). This enabled us to take advantage of many new features which weren't available in ES5 (the version most web browsers support and run) and write clean and more maintainable code.

We use webpack to bundle together separate JS files and Babel to compile ES6 to ES5. You can take advantage of webpack and use it to also import plugins and libraries from the node_modules folder directly in the custom code since all third party plugins used in OneUI will be installed with npm, too, after running npm install.

ES6 JS code can be found under assets/_js/ folder. These files have to be compiled to ES5 first before we include them in our pages and this is completely automated through the tasks we've created.

Files	Description
`main/*`	Vital libraries (Bootstrap + SimpleBar) and custom OneUI JS functionality used in all pages. If you would like to add your own functionality or overrides, you can do so in `assets/_js/main/app.js` (the inline comments will guide you through).
`pages/*`	Files with custom code showcasing various plugin examples. They are used separately only in specific pages.

Please make sure that you don’t use snippets from ES6 code directly in your pages since older browsers won't be able to run them.

Now, let’s have a better look at the JavaScript folder (assets/js/*) which includes the compiled ES6 files as well as other JS resources:

Files	Description
`lib/*`	Third party optional libraries are included here. Currently only jQuery can be found and needs to be added only if you would like to use a jQuery based plugin in your page. The core JS functionality does not use it.
`plugins/*`	All supported and integrated third-party plugins are included here. Some of them require from you to add their stylesheet as well, in the page you would like to use them (always before `oneui.css` because for a few plugins we include style overrides). All those plugins will also be downloaded in `node_modules` folder after you run `npm install`. That means that you could also import and bundle them in the custom code if this is something you want.
`pages/*`	Custom JS code used in specific pages demonstrating the usage of various plugins and functionality. These files are compiled from `assets/_js/pages/*`.
`oneui.app.min.js`	The main file containing all vital libraries (Bootstrap + SimpleBar) and custom JS code needed for OneUI features including layout and blocks API. It also includes various helper functions which you can call per page for enabling extra features (eg Table Helpers) or repetitive init code of various third party plugins. This file is compiled from `assets/_js/main/app.js`.

At the following section, we showcase various JS helpers for third party plugins. These are code snippets which init plugins' functionality in the related markup. We have created many helpers to let you init various plugins easily without repeating the same JS code over and over again in your pages.

Let’s have a better look at the core JavaScript libraries included with OneUI:

Name	Helper	Version	Online
Bootstrap.js		5.1.3
Bootstrap plugins offer extra functionality such as modals, tabs, tooltips & popovers. All plugins can be used directly in the template. Some of them init automatically from Bootstrap (eg modals or tabs) but others need to be initialized on demand. Helpers: There are 2 available helpers for Bootstrap components: tooltips and popovers. These helpers are already called from OneUI custom functionality on page load by default. You only must call them again if you inject new markup to the page and would like to init the related functionality on it. `// Tooltip One.helpers('bs-tooltip'); // Popover One.helpers('bs-popover');` Usage (add data-* attributes to an element or use .js-* classes): `<!-- Tooltip with data-toggle --> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip Text"> Show Tooltip </button> <!-- Tooltip with class --> <button type="button" class="js-bs-tooltip btn btn-primary" data-bs-placement="top" title="Tooltip Text"> Show Tooltip </button>` `<!-- Popover with data-toggle --> <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top" title="Popover title." data-bs-content="Popover content."> Show Popover </button> <!-- Popover with class --> <button type="button" class="js-bs-popover btn btn-primary" data-bs-placement="top" title="Popover title." data-bs-content="Popover content."> Show Popover </button>`
SimpleBar		5.3.6
Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

Let’s have a better look at the available pure JS plugins:

Name	CSS	Helper	Version	Online
Chart.js			3.7.0
Simple, clean and engaging charts for designers and developers. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/chart.js/chart.min.js"></script>` Usage: Please check out Charts page under Components for usage examples.
CKEditor 4			4.17.1
CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/ckeditor/ckeditor.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('js-ckeditor');</script>` Usage (add `js-ckeditor` id to a `textarea` or `js-ckeditor-inline` to a `div` for an inline editor): `<textarea id="js-ckeditor" name="ckeditor">Hello CKEditor!</textarea> <div id="js-ckeditor-inline">Hello inline CKEditor!</div>`
CKEditor 5			32.0.0
CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Required JS files for Classic Editor (include after all other JS scripts): `<script src="assets/js/plugins/ckeditor5-classic/build/ckeditor.js"></script>` Required JS files for Inline Editor (include after all other JS scripts): `<script src="assets/js/plugins/ckeditor5-inline/build/ckeditor.js"></script>` Helper (for both Editors) (call it after all JS scripts are added): `<script>One.helpersOnLoad('js-ckeditor5');</script>` Usage (add `js-ckeditor5-classic` or `js-ckeditor5-inline` id to a `div`): `<div id="js-ckeditor5-classic">Hello classic CKEditor 5!</div> or <div id="js-ckeditor5-inline">Hello inline CKEditor 5!</div>`
Cropper.js			1.5.12
Cropper.js is a JavaScript image cropper. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/cropperjs/cropper.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/cropperjs/cropper.min.js"></script>` Usage: Please check out Image Cropper page under Components for usage examples.
Dropzone.js			5.9.3
DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/dropzone/min/dropzone.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/dropzone/min/dropzone.min.js"></script>` Usage (add `dropzone` class to a `form`): `<form class="dropzone" action=""></form>`
Flatpickr			4.6.9
Lightweight, powerful JavaScript datetimepicker with no dependencies. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/flatpickr/flatpickr.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/flatpickr/flatpickr.min.js"></script>` Helper (call it after all other scripts are added): `<script>One.helpersOnLoad('js-flatpickr');</script>` Usage (add `js-flatpickr` class to a text `input`): `<input type="text" class="js-flatpickr form-control">`
FullCalendar			5.10.1
A full-sized drag & drop JavaScript event calendar Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/fullcalendar/main.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/fullcalendar/main.min.js"></script>` Usage: Please check out Calendar page under Components for usage examples.
Highlight.js			9.16.2
JavaScript syntax highlighter. Required CSS files (include before main CSS - You can also include some other file from `styles` folder for alternative syntax highlighting): `<link rel="stylesheet" href="assets/js/plugins/highlightjs/styles/atom-one-dark.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/highlightjs/highlight.pack.min.js"></script>` Helper (call it after all other scripts are added): `<script>One.helpersOnLoad('js-highlightjs');</script>` Usage: Please check out Syntax Highlighting page under Components for usage examples.
SimpleMDE Markdown Editor			1.11.2
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking. It has been slightly edited to fix a conflict issue with FontAwesome. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/simplemde/simplemde.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/simplemde/simplemde.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('js-simplemde');</script>` Usage (add `js-simplemde` class to a `textarea`): `<textarea class="js-simplemde" id="simplemde" name="simplemde">Hello SimpleMDE!</textarea>`
SweetAlert2			11.4.0
An awesome replacement for JavaScript's alert. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/sweetalert2/sweetalert2.min.css">` Required JS files (include after all core JS scripts): `<script src="assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>` Usage: Please check out Dialogs page under Components for usage examples.

Let’s have a better look at the jQuery based plugins which require jQuery to work:

Name Version Online

jQuery 3.6.0

Name	Version	Online
jQuery	3.6.0
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. Required JS files (include after OneUI JS and before any jQuery plugin): `<script src="assets/js/lib/jquery.min.js"></script>`

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Required JS files (include after OneUI JS and before any jQuery plugin):

<script src="assets/js/lib/jquery.min.js"></script>

Name	CSS	Helper	Version	Online
Bootstrap Colorpicker			3.4.0
A nice and customizable colorpicker plugin for Bootstrap. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-colorpicker');</script>` Usage (add `js-colorpicker` class to an input): `<input type="text" class="js-colorpicker form-control" value="#db4a39">`
Bootstrap Datepicker			1.9.0
A nice and customizable datepicker plugin for Bootstrap. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-datepicker');</script>` Usage (add `js-datapicker` class to an input): `<input type="text" class="js-datepicker form-control">`
Bootstrap Maxlength			1.10.1
This plugin integrates by default with Bootstrap using badges to display the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-maxlength');</script>` Usage (add `js-maxlength` class to a text `input`): `<input type="text" class="js-maxlength form-control" maxlength="20">`
Bootstrap Notify			3.1.3
Turns standard Bootstrap alerts into "Growl-like" notifications. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/bootstrap-notify/bootstrap-notify.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-notify');</script>` Usage: Please check out the Notifications page under Components for usage examples.
DataTables			1.11.4
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/datatables-bs5/css/dataTables.bootstrap5.min.css"> <link rel="stylesheet" href="assets/js/plugins/datatables-buttons-bs5/css/buttons.bootstrap5.min.css"> <link rel="stylesheet" href="assets/js/plugins/datatables-responsive-bs5/css/responsive.bootstrap5.min.css">` Required JS files (include after all other JS scripts): <script src="assets/js/plugins/datatables/jquery.dataTables.min.js"></script> <script src="assets/js/plugins/datatables-bs5/js/dataTables.bootstrap5.min.js"></script> <script src="assets/js/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script> <script src="assets/js/plugins/datatables-responsive-bs5/js/responsive.bootstrap5.min.js"></script> <script src="assets/js/plugins/datatables-buttons/dataTables.buttons.min.js"></script> <script src="assets/js/plugins/datatables-buttons-bs5/js/buttons.bootstrap5.min.js"></script> <script src="assets/js/plugins/datatables-buttons-jszip/jszip.min.js"></script> <script src="assets/js/plugins/datatables-buttons-pdfmake/pdfmake.min.js"></script> <script src="assets/js/plugins/datatables-buttons-pdfmake/vfs_fonts.js"></script> <script src="assets/js/plugins/datatables-buttons/buttons.print.min.js"></script> <script src="assets/js/plugins/datatables-buttons/buttons.html5.min.js"></script> Usage: Please check out DataTables page under Tables for usage examples.
Easy Pie Chart			2.1.7
Easy Pie Chart is a lightweight plugin to draw simple, animated pie charts for single values. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/easy-pie-chart/jquery.easypiechart.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-easy-pie-chart');</script>` Usage (add `js-pie-chart` class to a `div` element): `<div class="js-pie-chart pie-chart" data-percent="25" data-line-width="2" data-size="100" data-bar-color="#ef5350" data-track-color="#e9e9e9" data-scale-color="#d9d9d9"> <span>..Content..</span> </div>`
Ion Range Slider			2.3.1
Easy, flexible and responsive range sliders. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/ion-rangeslider/css/ion.rangeSlider.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-rangeslider');</script>` Usage (add `js-rangeslider` class to a text `input`): `<input type="text" class="js-rangeslider form-control" value="50">`
jQuery Appear			1.0.0
jQuery plugin to call a function when an element appears. We use it to make an element visible on scrolling. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery-appear/jquery.appear.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-appear');</script>` Usage (add data-* attributes to an element and the `invisible` class): `<div class="invisible" data-toggle="appear"> Content.. </div>` You can also use more options: `<div class="invisible" data-toggle="appear" data-class="animated fadeInUp" data-timeout="250" data-offset="-100"> Content.. </div>`
jQuery Countdown			2.2.0
The Final Countdown plugin for jQuery. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery-countdown/jquery.countdown.min.js"></script>` Usage: Please check out Coming Soon page for usage example.
jQuery Sparkline			2.4.1
This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via JavaScript. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-sparkline');</script>` Usage: `<span class="js-sparkline" data-type="line" data-points="[9,5,2,4,6,1,3,5]"></span>` Please check out Charts page under Components for more usage examples.
jQuery Validation			1.19.3
The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery-validation/jquery.validate.min.js"></script> <script src="assets/js/plugins/jquery-validation/additional-methods.js"></script>` Helper (call it before setting up your custom validation rules - it will load the default options for you): `One.helpers('jq-validation');` Usage: Please check out Validation page under Forms for usage examples.
jQuery Masked Input			1.4.1
This is a masked input plugin for the jQuery JavaScript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates, phone numbers, etc). Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery.maskedinput/jquery.maskedinput.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-masked-inputs');</script>` Usage (the helper inits various classes to work with): Please check out Plugins page under Forms for usage examples.
jQuery Raty			3.1.1
A star rating plugin. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/raty-js/jquery.raty.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/raty-js/jquery.raty.js"></script>` Usage: Please check out Rating page under Components for usage examples.
jVectorMap			3.1.1
Vector Maps component. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/jvectormap/dist/jquery-jvectormap.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jvectormap/dist/jquery-jvectormap.min.js"></script> <script src="assets/js/plugins/jvectormap/maps/__map-file__.js"></script>` Usage: Please check out Vector Maps page under Components for usage examples.
Magnific Popup			1.1.0
Light and responsive lightbox script with focus on performance. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/magnific-popup/magnific-popup.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-magnific-popup');</script>` Usage (with `js-gallery` class): Please check out Gallery page under Components for usage examples.
Select2			4.0.13
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/select2/css/select2.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/select2/js/select2.full.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-select2');</script>` Usage (add `js-select2` class to a `select` element): `<select class="js-select2 form-control" style="width: 100%;" data-placeholder="Choose one.."> <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin --> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>`
Slick			1.8.1
The last carousel you'll ever need. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/slick-carousel/slick.css"> <link rel="stylesheet" href="assets/js/plugins/slick-carousel/slick-theme.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/slick-carousel/slick.min.js"></script>` Helper (call it after all JS scripts are added): `<script>One.helpersOnLoad('jq-slick');</script>` Usage (with `js-slider` class): `<div class="js-slider"> <div> Slide #1 </div> <div> Slide #2 </div> <div> Slide #3 </div> </div>` Please check out Sliders page under Components for more usage examples.
Vide			0.5.1
Easy as hell jQuery plugin for video backgrounds. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/vide/jquery.vide.min.js"></script>` Usage (set the url of your video in the `data-vide-bg` attribute of a `div` similar to the following): `<div class="bg-video" data-vide-bg="url/to/your/video/without/the/file/extension" data-vide-options="posterType: jpg"> ... </div>` Note: If you are having issues with the auto video playback in Safari 11, please have a look at https://github.com/vodkabears/Vide/issues/206

Finally, let’s have a better look at few custom helpers:

Print Page

A helper which prints the main content of the current page.

Helper (just by calling the following function):

One.helpers('one-print');

Class Toggle

A helper which allows you to toggle a custom class on the element of your choice on button click.

Helper:

This helper is already called by default on page load. You only must call it again if you inject new markup to the page and would like to init the functionality on it.

One.helpers('one-toggle-class');

Usage:

Your target element

<div class="js-target-class"></div>

Your button

<button type="button" data-toggle="class-toggle" data-target=".js-target-class" data-class="your-class">
    Toggle
</button>

In this specific example, each button click will toggle the class 'your-class' on the element with class 'js-target-class'.

Ripple

A helper which animates a ripple on button click.

Helper:

This helper is already called by default on page load. You only must call it again if you inject new markup to the page and would like to init the functionality on it.

One.helpers('one-ripple');

Usage (add data-* attributes to a button):

<button type="button" class="btn btn-primary" data-toggle="click-ripple">Primary</button>

Table Sections

A helper which allows you to create table sections that toggle on row click (like an accordion component).

Helper (call it after all JS scripts are added):

<script>One.helpersOnLoad('one-table-tools-sections');</script>

Usage:

1. Add the class js-table-sections to your table

<table class="js-table-sections table table-hover">
  ...
</table>

2. Use the following markup in your table to create clickable header rows and their content

...
<tbody class="js-table-sections-header">One row</tbody>
<tbody>Multiple rows which show/hide on previous tbody’s row click</tbody>
<tbody class="js-table-sections-header">One row</tbody>
<tbody>Multiple rows which show/hide on previous tbody’s row click</tbody>
<tbody class="js-table-sections-header">One row</tbody>
<tbody>Multiple rows which show/hide on previous tbody’s row click</tbody>
...

Please check out Helpers page under Tables for usage examples.

Checkable Table

A helper which allows you to create a table with checkable rows.

Helper (call it after all JS scripts are added):

<script>One.helpersOnLoad('one-table-tools-checkable');</script>

Usage:

1. Add the class js-table-checkable to your table

<table class="js-table-checkable table table-hover">
  ...
</table>

2. Use similar markup in your table to create checkable rows

...
<thead>
  <tr>
    <th>
      <input type="checkbox" id="check-all" name="check-all">
    </th>
    <th>Name</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
      <input type="checkbox" id="row_1" name="row_1">
    </td>
    <td>Name 2</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="row_2" name="row_2">
    </td>
    <td>Name 2</td>
  </tr>
</tbody>
...

Please check out Helpers page under Tables for usage examples.

You can run multiple helpers in a page by using an array:
One.helpers(['helper1', 'helper2', 'helper3']);

Alternatively, you can also use helpersOnLoad function to run them once DOM Content is loaded:
One.helpersOnLoad(['helper1', 'helper2', 'helper3']);

Feel free to ignore the provided helpers and use your own plugin inits after you’ve included the resources of the ones you need in your page.

When a helper is called and functionality/plugin is initialized, a class js-HELPER_NAME-enabled is auto added to the element. This ensures that if you add a similar element dynamically to your page and call the helper again, the functionality/plugin will be initialized only on the new element. It’s a nice convenient solution but please have in mind that if you copy-paste an element to your markup from your browser’s developer tools, then you will also copy this extra class, so remember to remove it!

Laravel Starter Kit

Using it in an existing Laravel installation

If you already have your own Laravel app and would like to use OneUI in an existing installation, then you will just have to copy over the following folders/files:

public/
- fonts/*
- media/*
- js/lib/*
- js/plugins/*
resources/
- js/oneui/*
- js/pages/*
- sass/*
- views/*
routes/web.php
Migrate example routes
webpack.mix.js
Migrate asset compiling rules

Afterwards, just install the required npm dependencies by running the following console command..

npm i bootstrap@^5 @popperjs/core@^2 simplebar@^5 && npm i browser-sync browser-sync-webpack-plugin sass sass-loader -D

..and finally run npm run dev to compile all assets.

Blade Templates

The provided Blade Templates under resources/views/ folder have everything you need to recreate any demo page we showcase in the PHP and HTML versions. If you are not familiar with Blade Templates, you can have a look at the official docs where they explained in detail. They can help us in many ways but most importantly, they enable us to create master layouts, so that we don’t repeat the same content in each one of our pages.

Blade Layout Templates

First of all, it’s important to know that we provide 2 main layouts, the simple and the backend layout. As you must have already seen from the HTML Structure section, the simple layout is actually just a subset of the backend layout (the main structure). It is the same layout without a header, sidebar, side overlay and footer.

Files	Description
`resources/views/layouts/simple.blade.php`	This is the simple layout which is ideal to recreate the one-page layout pages such as Sign In or Error pages. A page example using this layout can be found at `resources/views/landing.blade.php`.
`resources/views/layouts/backend.blade.php`	This is the backend layout which includes all main elements (header, sidebar, side overlay and footer) and it is ideal for recreating full backend pages. A page example using this layout can be found at `resources/views/dashboard.blade.php`.

Before adding your own pages, you can create your custom layout based on your preferences or use the existing ones to recreate any layout you want. You will just have to find the page from the HTML version with the layout you are interested in, use the same classes used in #page-container element and replace the HTML content of the main sections (header, sidebar, side overlay and footer) by copying over the HTML markup you find in each related element.

Recreating a page from the HTML version

It is a simple process and we provide related page examples for each occasion under resources/views/pages/ folder. Let’s have a better look:

Static content (example in blank.blade.php)
If the page you are interested in doesn’t use plugins, you will have to:
- Copy over the HTML markup found in your #main-container element to your @section('content') section.
Static content with a plugin using a JS helper (example in slick.blade.php)
If the page you are interested in uses plugins for which we provide JS helpers, you will have to:
- Copy over the HTML markup found in your #main-container element to your @section('content') section.
- Include plugins’ required CSS assets in your @section('css_before') section.
- Include plugins’ required JS assets and run the JS helper in your @section('js_after') section.
Static content with a plugin using custom JS init code (example in datatables.blade.php)
If the page you are interested in uses plugins for which you have to use custom JS to init it, you will have to:
- Copy over the HTML markup found in your #main-container element to your @section('content') section.
- Include plugins’ required CSS assets in your @section('css_before') section.
- Include plugins’ required JS assets in your @section('js_after') section.
- Copy over the JS init code (found under assets/_js/pages/ folder) used in the page from the HTML version, in the resources/js/pages/ folder and add it in your webpack.mix.js file to be compiled with Laravel Mix (eg .js('resources/js/pages/tables_datatables.js', 'public/js/pages/tables_datatables.js')). Afterwards, include it in your @section('js_after') section and edit it accordingly based on your preferences.

You can have a look at the JavaScript Structure section where we include info about all integrated plugins, their required assets and their JS helper availability. Moreover, it’s worth mentioning that if you are more experienced, you could use dynamic imports which is a method of code-splitting and enables us to split JavaScript code into separate files.

Quick Tips

Wrapping `#page-container`

If you would like to wrap the main layout div#page-container with another div, then you should add the class hero-static to your wrapping div element to ensure that the flexbox layout will keep working as expected and your main elements (eg footer), will be positioned accordingly.

CSS prefixes for older browsers

You can update the following array in package.json accordingly if you would like the Autoprexifer to auto add CSS prefixes for older browser versions (when using the Gulp tasks to compile from Sass to CSS). By default, we use the same as Bootstrap 5 does.

"browserslist": [
  ">= 0.5%",
  "last 2 major versions",
  "not dead",
  "Chrome >= 60",
  "Firefox >= 60",
  "Firefox ESR",
  "iOS >= 12",
  "Safari >= 12",
  "not Explorer <= 11"
]

High resolution screens

The UI will look crispy clear on high resolution screens and if you would like your images to look great, too, then you will have to use the srcset attribute of the <img> element. For example, if you have an image url/to/image.jpg and its high resolution version url/to/image@2x.jpg, you will have to use the following markup:

<img src="url/to/image.jpg" srcset="url/to/image@2x.jpg 2x" alt="Image Description">

The browser will auto select the best version and load it accordingly. Older browsers will ignore the srcset attribute and will load the regular image as usual.

Demo Forms

Please remember to remove onsubmit="return false;" from <form> tags if you are using a form from the example pages. It is just added to prevent forms from submitting in case you click on a submit button while previewing the pages.

Favicons

If you would like to auto create your favicons from your image/logo, you can use the free service over at http://realfavicongenerator.net

Credits

We’ve used the following resources as listed. Special thanks to all the authors for their hard work!

Frameworks
Bootstrap

Photos
MyPhotoPack
Unsplash

Videos
Pexels

Icons
Font Awesome 6
Simple Line Icons

Libraries/Scripts
Animate.css
jQuery
jQuery Appear
jQuery Countdown
jQuery Validation
jQuery Masked Input
jQuery Sparklines
Bootstrap Colorpicker
Bootstrap Datepicker
Bootstrap Notify
SimpleBar
Chart.js
CKEditor
Datatables
Dropzone
Easy Pie Chart
FullCalendar
Highlight.js
Magnific Popup
Select2
Slick
Ion Range Slider
jQuery Raty
Bootstrap Maxlength
jVectorMap
SimpleMDE
SweetAlert2
Vide
Popper.js
Cropper.js
Flatpickr

Thank You!

Thank you so much for supporting our work by choosing one of our products! We wish you all the best with your upcoming projects and endeavors in life! If you would like to check out more of our work, be sure to visit our website.

Have a great day and happy coding!

Thank you for choosing OneUI!

Changelog

5.2 Update

New Features

Improvements

Fixes

Updates

5.1 Update

New Features

Improvements

Fixes

Updates

Changes

5.0 Release

Updating

HTML/PHP Versions

Laravel Starter Kit (run the commands npm install and npm run dev after updating with the new files)

HTML/PHP Versions

HTML/PHP Versions

Package

Bootstrap

Gulp Tasks

HTML

Sass

JavaScript

Laravel Starter Kit

Using it in an existing Laravel installation

Blade Templates

Blade Layout Templates

Recreating a page from the HTML version

Quick Tips

Wrapping #page-container

CSS prefixes for older browsers

High resolution screens

Demo Forms

Favicons

Credits

Thank You!

Laravel Starter Kit (run the commands `npm install` and `npm run dev` after updating with the new files)

Wrapping `#page-container`